<template>
  <div class="Goregister">
    <van-sticky>
      <van-nav-bar
        title="预约挂号"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-notice-bar :scrollable="false" text="号源服务由挂号网在线提供" />
      <div style="display: flex; height: 0.4rem; line-height: 0.4rem">
        <van-search
          style="width: 87%"
          shape="round"
          @click="jumpSearchpages"
          placeholder="搜索医院,医生,科室,疾病"
        />
        <span style="background-color: #fff"
          >全国<van-icon name="arrow-down"
        /></span>
      </div>
    </van-sticky>
    <div class="GoregisterGrid">
      <dl>
        <dt>
          <img src="../../image/GoregisterImg1.png" alt="" />
        </dt>
        <dd>精神心理</dd>
      </dl>
      <dl>
        <dt><img src="../../image/GoregisterImg2.png" alt="" /></dt>
        <dd>冬季膏方</dd>
      </dl>
      <dl>
        <dt><img src="../../image/GoregisterImg3.png" alt="" /></dt>
        <dd>名医挂号</dd>
      </dl>
      <dl>
        <dt><img src="../../image/GoregisterImg4.png" alt="" /></dt>
        <dd>导诊台</dd>
      </dl>
    </div>
    <van-sticky :offset-top="118">
      <div style="margin-top: 0.09rem">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @click="onSelect(value1)"
          >
          </van-dropdown-item>
          <van-dropdown-item title="筛选" ref="itemRef">
            <div style="position: relative">
              <h3
                style="
                  margin-left: 0.2rem;
                  margin-top: 0.1rem;
                  margin-bottom: 0.1rem;
                "
              >
                医院类型
              </h3>
              <span
                style="
                  color: #858a93;
                  position: absolute;
                  right: 0.2rem;
                  top: 0.07rem;
                "
                >全部></span
              >
            </div>
            <span
              v-for="(item, index) in goregisterTitle"
              :key="index"
              @click="onConfirm(item, index)"
              :class="item.flag ? 'inactive-button' : 'active-button'"
            >
              <div>
                {{ item.classification }}
              </div>
            </span>
            <div style="padding: 5px 16px">
              <van-button style="width: 50%; color: #3f86ff" @click="onReset">
                重置
              </van-button>
              <van-button style="width: 50%" type="primary" @click="onConfirms">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </van-sticky>
    <van-list
      style="height: 7rem"
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div
        class="GoregisterList"
        v-for="(item, index) in goregisterList"
        :key="index"
        @click="onItemClick(item)"
      >
        <dl>
          <dt>
            <img v-lazy="item.img" alt="" />
          </dt>
          <dd>
            <p style="font-size: 17px; font-weight: 600">
              {{ item.name }}
            </p>
            <span style="color: #ff6f62">三级甲等</span
            ><span style="margin-left: 0.1rem; color: #858a93">{{
              item.nosocomium
            }}</span>
            <p style="color: #858a93">重点科室：{{ item.department }}</p>
            <span style="background-color: #e0ebfa; color: #818ca2"
              >全国排名{{ item.recover }}</span
            >
          </dd>
        </dl>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from "vue";
import instance from "../axios/index";
import { useCounterStore } from "../pinia/index.ts"; //引入pinia
const store = useCounterStore();
const checked = ref(true);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const finished = ref(false);
const goregisterList = ref([]);
const goregisterTitle = ref([]);
const goregisterData = ref([]);
const goregisterNewData = ref([]);
const newtitle = ref([]);
const newpifu = ref([]);
const newRegister = ref([]);
import { useRouter } from "vue-router";
const router = useRouter();
let newarr = [];
const itemRef = ref(null);
const onClickLeft = () => {
  window.location.href = "/home/home";
};
// 点击跳转详情
const onItemClick = (item) => {
  store.data = item;
  router.push("/consultationDetails");
};
const onConfirm = (item, index) => {
  // 点击选中的高亮
  item.flag = !item.flag;
};
// 点击确定
const onConfirms = async () => {
  // 存储数据清空
  newRegister.value = [];
  // 用所有科室进行循环
  goregisterTitle.value.map((item) => {
    // 判断我是否选中了
    if (!item.flag) {
      // 将我选中的科室存储起来
      newRegister.value.push(item.classification);
    }
  });
  // 获取所有的数据
  let res = await instance.post("/api/homeall");
  // 用所有的选中的数据进行循环
  newRegister.value.forEach((item) => {
    // 用所有的数据进行筛选数据
    res.data.data.map((items) => {
      // 判断我选中的数据是否等于我的科室
      if (items.department == item) {
        // 添加到列表中
        newpifu.value.push(items);
        return items;
      } else {
        return null;
      }
    });
  });
  newarr = newpifu.value.splice(page.value * pageSize.value, 10);
  goregisterList.value = newarr;
  itemRef.value.toggle(); //关闭下拉框
};
// 点击重置
const onReset = () => {
  goregisterTitle.value.map((item) => {
    item.flag = true;
  });
  // 清空数据
  goregisterList.value = [];
  // 开启下拉
  loading.value = true;
  // 重新获取数据
  onLoad();
  itemRef.value.toggle(); //关闭下拉框
};

const onLoad = () => {
  page.value += 1;
  setTimeout(() => {
    instance.post("/api/homeall").then((res) => {
      res.data.data.forEach((item) => {
        goregisterData.value.push(item.department);
      });
      let newarr = res.data.data.splice(page.value * pageSize.value, 10);
      goregisterList.value = [...goregisterList.value, ...newarr];
    });
    loading.value = false;
    if (goregisterList.value >= 500) {
      finished.value = true;
    }
  }, 1000);
};
instance.post("/api/classification").then((res) => {
  goregisterTitle.value = res.data.data;
});

const onSelect = (item) => {
  if (item == "1") {
    // 点击数据的时候 获取所有的数据 并排序
    instance.post("/api/homeall").then((res) => {
      // 申明一个空数组进行存储
      let arr = [];
      // 空数组的值等于我数组排完的顺序
      arr.value = res.data.data.sort(
        (a, b) => a.interrogation - b.interrogation
      );
      let newarr = arr.value.splice(page.value * pageSize.value, 10);
      goregisterList.value = newarr;
    });
    itemRef.value.toggle();
    // 学院 排序 x
  } else if (item == "2") {
    // 点击数据的时候 获取所有的数据 并排序
    instance.post("/api/homeall").then((res) => {
      // 申明一个空数组进行存储
      let arr = [];
      // 空数组的值等于我数组排完的顺序
      arr.value = res.data.data.sort((a, b) => a.recover - b.recover);
      let newarr = arr.value.splice(page.value * pageSize.value, 10);
      goregisterList.value = newarr;
    });
    itemRef.value.toggle();
  } else {
    goregisterTitle.value.map((item) => {
      item.flag = true;
    });
    // 清空数据
    goregisterList.value = [];
    // 开启下拉
    loading.value = true;
    // 重新获取数据
    onLoad();
    // itemRef.value.toggle(); //关闭下拉框
  }
  itemRef.value.toggle(); //关闭下拉框
};
// 搜索
const jumpSearchpages = () => {
  router.push("/home/searchpage");
};

const value1 = ref(0);
const value2 = ref("a");
const option1 = [
  { text: "综合排序", value: 0 },
  { text: "离我最近", value: 1 },
  { text: "患者评价数", value: 2 },
];
</script>

<style scoped>
.active-button {
  display: inline-block;
  margin-left: 0.1rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  background-color: skyblue;
  border-radius: 0.2rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  margin-top: 0.1rem;
  color: #000;
}

.inactive-button {
  display: inline-block;
  margin-left: 0.1rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  background-color: #f5f6f6;
  border-radius: 0.2rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  margin-top: 0.1rem;
  color: #858a93;
}

.Goregister {
  background-color: #f5f6f7;
}

.GoregisterGrid {
  width: 100%;
  display: flex;
  height: 1rem;
  margin-top: 0.05rem;
  background-color: #fff;
}

.GoregisterGrid dl {
  height: 1rem;
  line-height: 1rem;
  width: 25%;
  text-align: center;
}

.GoregisterGrid dl dt {
  /* height: 0.4rem; */
  height: 60%;
  margin: 0 auto;
}

.GoregisterGrid dl dt img {
  height: 60%;
  width: 40%;
}

.GoregisterGrid dl dd {
  height: 0.4rem;
  line-height: 0.4rem;
  width: 100%;
  margin-inline-start: 0;
  margin: 0 auto;
}

.GoregisterList {
  width: 94.3%;
  height: 1rem;
  padding: 0.1rem;
  background-color: #fff;
  /* background-color: red; */
  border-bottom: 1px solid #000;
}

.GoregisterList dl {
  width: 100%;
  height: 100%;
  display: flex;
}

.GoregisterList dl dt {
  width: 40%;
  height: 100%;
  background-color: #fff;
}

.GoregisterList dl dt img {
  width: 90%;
  height: 100%;
}

.GoregisterList dl dd {
  width: 100%;
  height: 1rem;
  background-color: #fff;
}

.highlight {
  display: inline-block;
  margin-left: 0.1rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  background-color: skyblue;
  border-radius: 0.2rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  margin-top: 0.1rem;
  color: #000;
}
</style>
